<template>
  <div class="home">
    <el-card class="box-card">
      <!--筛选条件-->
      <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="searchForm.tableName" placeholder="表名"></el-input>
        </el-form-item>
        <el-form-item label="数据源" prop="dataSourceId">
          <el-select v-model="searchForm.dataSourceId" placeholder="数据源">
            <el-option v-for="source in dataSourceList" :key="source.id" :label="source.name"
                       :value="source.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchSubmit">查询</el-button>
          <el-button @click="searchReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!--表格操作-->
      <el-row style="text-align: left;margin-bottom: 5px;">
        <el-button type="primary" size="mini" icon="el-icon-document-add" @click="openAddDialog">导入</el-button>
        <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeTable">删除</el-button>
      </el-row>

      <!--表格-->
      <template>
        <el-table
            :data="tableData"
            border
            style="width: 100%;min-height: 400px;"
            @selection-change="tableSelectionChange">
          <el-table-column
              align="center"
              type="selection"
              width="40">
          </el-table-column>
          <el-table-column
              align="center"
              type="index"
              label="序号">
          </el-table-column>
          <el-table-column
              align="center"
              prop="tableName"
              label="表名">
          </el-table-column>
          <el-table-column
              align="center"
              prop="genClass"
              label="类名">
          </el-table-column>
          <el-table-column
              align="center"
              prop="dataSourceName"
              label="数据源">
          </el-table-column>
          <el-table-column
              align="center"
              prop="tableComment"
              label="表注释">
          </el-table-column>
          <el-table-column
              align="center"
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="codegen(scope.row)">生成</el-button>
              <el-button type="text" @click="openUpdatePage(scope.row)">配置</el-button>
              <el-button type="text" style="color: #f13636" @click="removeTable(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <!--分页-->
      <div class="block">
        <el-pagination
            align="right"
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="page.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
      </div>
    </el-card>

    <!--导入-->
    <el-dialog title="导入表" :visible.sync="importFormVisible" style="text-align: left"
               :before-close="cancelImport">
      <el-form :inline="true" :model="importForm" ref="importForm" class="demo-form-inline">
        <el-form-item label="数据源" prop="dataSourceId">
          <el-select v-model="importForm.dataSourceId" placeholder="数据源">
            <el-option v-for="source in dataSourceList" :key="source.id" :label="source.name"
                       :value="source.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="importSearchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableList"
                border
                @selection-change="importTableSelectionChange">
        <el-table-column align="center" type="selection" width="40"></el-table-column>
        <el-table-column prop="tableName" label="名称"></el-table-column>
        <el-table-column prop="tableComment" label="注释"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            align="right"
            @size-change="importPageSizeChange"
            @current-change="importPageCurrentChange"
            :current-page="importPage.pageNum"
            :page-size="importPage.pageSize"
            layout="total, prev, pager, next"
            :total="importPage.total">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="importTable">确 定</el-button>
        <el-button @click="cancelImport">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {listAllDataSource, listTableInfo} from "@/api/datasource";
import {Message, MessageBox} from "element-ui";
import {listTable, importTable, removeTable, codegenDownload, codegenLocal} from "@/api/codegen";

export default {
  name: 'HomeView',
  data() {
    return {
      searchForm: {
        tableName: undefined,
        dataSourceId: undefined
      },
      selectRowIds: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      dataSourceList: [],
      importFormVisible: false,
      importForm: {
        dataSourceId: null,
      },
      importTables: [],
      tableList: [],
      importPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      }
    }
  },
  created() {
    this.listTable();
    this.listAllDataSource();
  },
  methods: {
    // 查询数据源
    listAllDataSource() {
      listAllDataSource().then(response => {
            this.dataSourceList = response.data;
          }
      );
    },
    // 查询
    searchSubmit() {
      this.listTable();
    },
    // 重置
    searchReset() {
      this.$refs.searchForm.resetFields();
      this.listTable();
    },
    // 多选
    tableSelectionChange(val) {
      this.selectRowIds = [];
      for (let e of val) {
        this.selectRowIds.push(e.id);
      }
    },
    // 切换每页数量
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.listTable();
    },
    // 切换页码
    pageCurrentChange(val) {
      this.page.pageNum = val;
      this.listTable();
    },
    // 查询数据库表配置
    listTable() {
      listTable({
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
        tableName: this.searchForm.tableName,
        dataSourceId: this.searchForm.dataSourceId
      }).then(response => {
            this.tableData = response.data.results;
            this.page.total = response.data.total;
          }
      );
    },

    // 新增弹窗
    openAddDialog() {
      this.importFormVisible = true;
      this.listTableInfo();
    },
    // 查询数据库表信息
    importSearchSubmit() {
      this.listTableInfo();
    },
    // 查询数据库表信息
    listTableInfo() {
      listTableInfo({
        pageNum: this.importPage.pageNum,
        pageSize: this.importPage.pageSize,
        dataSourceId: this.importForm.dataSourceId
      }).then(response => {
            this.tableList = response.data.results;
            this.importPage.total = response.data.total;
          }
      );
    },
    // 切换每页数量
    importPageSizeChange(val) {
      this.importPage.pageSize = val;
      this.listTableInfo();
    },
    // 切换页码
    importPageCurrentChange(val) {
      this.importPage.pageNum = val;
      this.listTableInfo();
    },
    // 多选
    importTableSelectionChange(val) {
      this.importTables = [];
      for (let e of val) {
        this.importTables.push(e.tableName);
      }
    },
    // 导入表
    importTable() {
      if (!this.importTables || this.importTables.length === 0) {
        Message.error("请先选择表");
        return;
      }
      importTable({dataSourceId: this.importForm.dataSourceId, tables: this.importTables}).then(() => {
        this.cancelImport();
        Message.success("导入成功");
        this.listTable();
      })
    },
    // 取消导入
    cancelImport() {
      this.resetImportForm();
      this.tableList = [];
      this.importFormVisible = false;
    },
    // 重置表单
    resetImportForm() {
      this.importForm = {
        dataSourceId: null
      };
    },

    // 编辑页面
    openUpdatePage(row) {
      this.$router.push({path: '/updateTable', query: {id: row.id}});
    },
    // 删除表配置
    removeTable(row) {
      const ids = row.id || this.selectRowIds;
      MessageBox.confirm('是否确认删除所选数据', "系统提示", {
        type: "warning",
      }).then(() =>
          removeTable(ids).then(() => {
            Message.success("删除成功");
            this.listTable();
          })
      );
    },
    // 代码生成
    codegen(row) {
      if (row.genType === '0') {
        codegenDownload(row.id).then(() => {
          console.log("生成成功");
        })
      } else {
        codegenLocal(row.id).then(() => {
          Message.success("生成成功");
        })
      }
    }
  }
}
</script>

<style scoped>
.block {
  margin-top: 10px;
}
</style>
